<template>
    <div class="box">
        <div class="title">
            <img src="../assets/bigtitle.png" alt="网速过慢" />
        </div>
        <div class="line">
            <img src="../assets/line.png" alt="网速过慢" />
        </div>
        <div class="baoming">
        <div>即刻报名</div>
        <el-form class="entry" :ref="saveInfo.body" :rules="rules" :model="saveInfo.body" label-width="80px" label-position="top">
            <el-form-item label="您的身份是？" prop="role">
            <el-radio-group v-model.trim="saveInfo.body.role">
                <el-radio :label="0">初中生</el-radio>
                <el-radio :label="1">高中生</el-radio>
                <el-radio :label="2">大学生</el-radio>
                <el-radio :label="3">上班族</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item label="您学习日语的目的是什么？" prop="goal">
            <el-radio-group v-model.trim="saveInfo.body.goal">
                <el-radio :label="0">工作需要</el-radio>
                <el-radio :label="1">考级</el-radio>
                <el-radio :label="2">出国/留学</el-radio>
                <el-radio :label="3">兴趣爱好</el-radio>
                <el-radio :label="4">高考</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item label="您目前的日语水平是什么？" prop="rank">
            <el-radio-group v-model.trim="saveInfo.body.rank">
                <el-radio :label="1">N1</el-radio>
                <el-radio :label="2">N2</el-radio>
                <el-radio :label="3">N3</el-radio>
                <el-radio :label="4">N4</el-radio>
                <el-radio :label="5">N5</el-radio>
                <el-radio :label="6">零基础</el-radio>
            </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
            <el-input v-model.trim="saveInfo.body.phone"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="cusName">
            <el-input v-model.trim="saveInfo.body.cusName"></el-input>
            </el-form-item>
            <el-form-item class="bottonCenter">
            <el-button type="primary" @click="onSubmit(saveInfo.body)">报名</el-button>
            </el-form-item>
        </el-form>
        <div class="ouni">
            <img src="../assets/ouni.png" alt="网速过慢" />
        </div>
        </div>
        <div class="pngtai">
        <div>平台优势</div>
        <div class="imgBox">
            <img src="../assets/1.png" alt="网速过慢" />
            <img src="../assets/2.png" alt="网速过慢" />
            <img src="../assets/3.png" alt="网速过慢" />
            <img src="../assets/4.png" alt="网速过慢" />
            <img src="../assets/5.png" alt="网速过慢" />
        </div>
        </div>
        <div class="xuanchuan">
        <div>宣传咨询</div>
        <div class="imgBox">
            <img src="../assets/a.png" alt="网速过慢" />
            <img src="../assets/b.png" alt="网速过慢" />
            <img src="../assets/c.png" alt="网速过慢" />
        </div>
        </div>
        <div class="record">
        <div>©2020 - www.czytech.cn - All Rights Reserved. </div>
        <el-link href="http://www.beian.miit.gov.cn/" target="_blank" type="danger">浙ICP备20028963号</el-link>
        </div>
    </div>
</template>

<script>
import { saveInfo } from "@/libs/reqlist.js";
export default {
  data() {
    var isPhone = (rule, value, callback) => {
      var pattern = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
      if (!pattern.test(value)) {
        return callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      saveInfo: {
        token: "",
        body: {
          cusName: "",
          phone: "",
          goal: null,
          role: null,
          rank: null,
          cusIp: ""
        }
      },
      rules: {
        role: [{ required: true, message: "不能为空", trigger: "blur" }],
        goal: [{ required: true, message: "不能为空", trigger: "blur" }],
        rank: [{ required: true, message: "不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: isPhone, trigger: "blur" },
        ],
        cusName: [{ required: true, message: "不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return;
        saveInfo(JSON.stringify(this.saveInfo)).then(res => {
          console.log(res)
          if (res.data.code === "000000") {
            this.$message({
              type: "success",
              message: "信息提交成功，请等待客服联系！",
            });
            this.$refs[form].resetFields()
          }
        });
      });
    },
    backtop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
};
</script>

<style lang="less" scoped>
@import './index-phone.less';
</style>
